<template>
	<view class="wrap_content" >
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<view class="content" style="background: url(https://pd.pdaxiang.com/upload/static/newImg/indexbgimg.jpg) no-repeat;">
			<!-- 弹幕 -->
			<!-- <lff-barrage ref="lffBarrage"></lff-barrage> -->
			<!-- <swiper
				class="jiang-swiper"
				:circular="true"
				vertical="true"
				display-multiple-items="1"
				autoplay
				:interval="2000"
				:duration="1000"
				disable-touch="true"
			>
				<swiper-item v-for="(item, index) in jiangList" :key="index">
					<view class="danmu-inner">
						<view class="user-box flex-a-c flex-j-a back-r-s" style="background: url(https://pd.pdaxiang.com/upload/static/index/piaopingbj.png);">
							<view class="user-img">
								<view class="img-box"><image :src="item.avatar"></image></view>
							</view>
							<view class="user-name color-h">{{ item.nickname }}</view>
							<view class="user-text color-h ">{{ item.pay_mode }}</view>
							<view class="user-status " :style="'color:' + item.prize_color">{{ item.prize_level }}</view>
							<image class="mall_img" :src="item.prize_icon"></image>
						</view>
					</view>
				</swiper-item>
			</swiper> -->
			<view class="header"  :style="{ paddingTop: navigationBarHeight + 20 + 'px' }"><u-icon name="arrow-left" size="52" @click="goback" color="#fff"></u-icon></view>
			<view class="kong"></view>
			<view class="goods_mh">
				<!-- <view class="scroll_y">
					<view class="run_top_left flexs" v-for="(item, index) in run_leftData" :key="'run_top_left' + index"><image :src="item"></image></view>
					<view class="run_top_center flexs" v-for="(item, index) in run_centerData" :key="'run_top_center' + index"><image :src="item"></image></view>
					<view class="run_top_right flexs" v-for="(item, index) in run_rightData" :key="'run_top_right' + index"><image :src="item"></image></view>
				</view> -->
			</view>
			<view class="caselist">
				<swiper circular="true" autoplay="true" @change="swiperChange" class="swiper_view">
					<swiper-item>
						<view class="swiper_cont">
							<view class="center_img"><image class="shop" :src="shopimg"></image></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="case_yuan flex-c-c">
				<view class="footer_pricess flex-c-c">
					<text>￥{{ mharrData.box.price }}</text>
				</view>
			</view>
		<!-- 	<view class="case_price flex-c-c">
				<text class="flex-c-c">这箱有礼，￥{{mharrData.box.price}}大王币/个</text>
			</view> -->
			<view class="footer_btn">
					<view class="footer_btn_top">
						<view class="openmh flex-column flex-c-c" @click="enterkefu">
							<u-image width="58" height="58" :src=" iconurl + '/static/newImg/kefubtn.png'"></u-image>
						</view>
						<view class="openmh_btn flexs" style="background:url(/static/newImg/djkx.png);" @click="openManghe">
						</view>
						<view class="openmh flex-column flex-c-c" @click="goUrl1">
							<u-image width="70" height="70" :src=" iconurl + '/static/newImg/hg.png'"></u-image>
						</view>
					</view>
				<view class="zhiyin_box">
					<image class="open" :src="iconurl + '/static/newImg/topimg.png' "></image>
					<!-- <image class="xia" :src="iconurl + '/static/index/xia.png' "></image> -->
				</view>
			</view>
		<!-- 	<view class="xuanze"  :class="xialaStatus==true ? 'xuanze_top_check' : ''">
				<view class="xuanze_top" @click="xiala">
					<view class="left">
						<text>换一换</text>
					</view>
					<view class="right">
						<image src="https://pd.pdaxiang.com/upload/static/index/bom.png" ></image>
					</view>
				</view>
					<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
						<view class="tabview" v-if="xialaStatus" >
							<view class="tablist" v-for="(item, index) in mharrData.box_list" :key="index" @click="godetail(item.box_id,index)">
								<image :src="item.cover_pic" mode="aspectFit" v-if="item.cover_pic"></image>
								<text class="title">{{item.name}}</text>
							</view>
						</view>
					</scroll-view>
			</view> -->
			<!-- <u-image width="74" height="74" class="share_btn" src="https://pd.pdaxiang.com/upload/static/index/fenxiang.png" @click="goshare"></u-image> -->
			<!-- <view class="kefu_view" @click="goUrl('https://pd.pdaxiang.com/upload/userPage/user/customerService')">
			</view> -->
		</view>
		<!-- <view class="footer">
			<view class="footer_list">
				<view class="listview" v-for="(item,index) in mharrData.level_list" :key="index">
					<image :src="item.icon"></image>
				</view>
			</view>
		</view> -->
		
		
	
		<!-- <view class="detail_bom_list">
			<view class="jian_bom">
				<view class="tui_sec" v-for="(item, i) in mharrData.prize_list" :key="i"
					@click="mhDetail(item.goods_id)" >
					<view class="picurl flexs">
						<image :src="item.icon"></image>
					</view>
					<view class="label flexs"> -->
						<!-- {{item.level_str}} -->
						
						<!-- <image :src="item.level_icon"></image>
					</view>
					<view class="tui_bom">
						<text class="sec">{{ item.name }}</text>
						<text class="sec2"><text style="font-size: 35rpx;color: #F46E13;font-weight: 600;">￥{{ item.price }}</text></text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 抽盒选择弹窗 -->
		<type-box ref="mhpop_tabStatus" :yulanData="yulanData" :couponList="couponList" :box_id="box_id" :youhuinum="youhuinum"
		:heji_num="heji_num" :coupon_idinit="coupon_idinit"  :youhuinumInit="youhuinumInit"
		 @goheji="goheji"  @goseleCoupon="goseleCoupon" @payConfirm_box="payConfirm_box" @quanscrollLower="quanscrollLower"></type-box>
		<!-- 开盒记录 -->
		<box-record ref="box_recordStatus" :prizeRecordlist="prizeRecordlist" :jiazaiStu="jiazaiStu" @enterRecordtab="enterRecordtab" @scrollLower="scrollLower" @backrecordsLestu="backrecordsLestu" @mhpagecheck="mhpagecheck" @popchange="popchange"></box-record>
		
	</view>
</template>

<script>
import typeBox from"@/components/popup/typebox.vue"
import boxRecord from"@/components/popup/boxRecord.vue"
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
export default {
	components:{
		typeBox,
		boxRecord,
		lffBarrage,
	},
	data() {
		return {
			xialaStatus:false,
			mharrData:{
				box:{},
				level_list:[],
				prize_list:[]
			},
			width: 60,
			navigationBarHeight: 0,
			box_id:"",
			defaultdata:{
				box:{},
				box_list:[],
				level_list:[],
				prize_list:[]
			},
			prize_list:[],
			yulanData:{},
			shopimg:"",
			share_url:"",
			prizeRecordlist:[],
			mhpage:1,
			mhlevel:-1,//-1 全部 1 '尊贵' 2,'稀有',  3'史诗', 4'至尊'
			indexInterval:null,
			quanpage:1,
			youhuinum:0,
			couponList:[],
			user_coupon_id:"",
			heji_num:0,
			coupon_idinit:"",//默认优惠券id
			youhuinumInit:0,//优惠多少钱
			jiangList:[],
			recordsLestu:false,//
			jiazaiStu:false,//加载中
			show:false,
			iconurl:this.$configs.urls
		};
	},
	onReady() {
		// uni.getSystemInfo({
		// 	success: function(res) {
		// 		this.navigationBarHeight = res.navigationBarHeight;
		// 	}
		// });
	},
	onLoad(e) {
		this.box_id = e.box_id
		if(e.ceshi){
			this.openManghe()
		}
		this.getchatadd(); //获取通知
	},
	onHide() {
		setTimeout(()=>{
			this.$refs.mhpop_tabStatus.close()
		},800)
		 clearTimeout();
		// this.$refs.lffBarrage.listData = []
	},
	
	onShow() {
		this.getplay();
		this.getlist();
	},
	methods: {
		//禁止弹出层穿透
		popchange(e){
			this.show = e.show
		},
		//优惠券加载更多
		quanscrollLower(e){
			// this.quanpage++;
		},
		//抽盒提交
		payConfirm_box(e){
			let data = {
				box_id: this.box_id,
				pay_mode:e.tabIndex,
				pay_type:3,
				user_coupon_id:e.coupon_id,
				invite_code:uni.getStorageSync('invite_code'),
				idef:uni.getStorageSync('idef'),
			};
			this.$Request.post(this.$api.mhapi.newSubmit, data).then(res => {
				
				if(res.data.is_prohibit_pay==1){
					uni.navigateTo({
						url:"/userPage/user/balance?heji_num=" + res.data.paidou
					})
					return
				}
				if(res.data.status==0){
					this.payurl = res.data.pay_data
					this.order_id = res.data.order_id
					//微信或支付宝支付
					this.payPrice(res.data.pay_data,res.data.order_id)
				}else if(res.data.status==1){
					uni.showToast({
						title:res.msg,
						icon:"none",
					})
					uni.navigateTo({
						url:'/rollPages/index/redouble?order_id=' + res.data.order_id + '&box_id=' + this.box_id + '&type=' + e.tabIndex + '&detailType=1'
					})
					
					
				}
			});
		},
		goheji(e){
			this.user_coupon_id = e.coupon_id
			this.youhuinum = e.youhuinum
			let price = e.price
			this.heji_num = Number(price) - Number(e.youhuinum)
		},
		//查询优惠券
		goseleCoupon(e,type){
			let data = {
				box_id: this.box_id,
				type:e.pay_mode,
				page:this.quanpage
			};
			uni.showLoading({
				title:"加载中..."
			})
			this.$Request.get(this.$api.user.boxCouponList, data).then(res => {
				uni.hideLoading()
				if(type==2){
					this.couponList = this.couponList.concat(res.data);
					return
				}
				this.couponList = res.data;
				if (this.couponList.length!=0) {
					this.coupon_idinit = this.couponList[0].user_coupon_id
					this.youhuinumInit = this.couponList[0].sub_price
				}
			});
		},
		//获取通知
		getchatadd() {
			let data = {
				box_id:this.box_id
			}
			this.$Request.get(this.$api.index.bulletchat,data).then(res => {
				this.jiangList = res.data.list;
			});
				
		},
		enterkefu(){
			if(this.mharrData.is_line_chat == 1){
				uni.navigateTo({
					url:this.mharrData.chat_kefu
				})
			}else{
				uni.navigateTo({
					url:"/orderPage/index/webkefuview?url=" + this.mharrData.chat_kefu
				})
			}
		},
		mhpagecheck(){
			this.mhpage = 1;
		},
		//关闭记录弹窗时触发定位取消
		backrecordsLestu(){
			this.recordsLestu = false;
		},
		//抽盒记录加载更多
		scrollLower(){
			this.recordsLestu = true;
			this.mhpage++;
			let data = {
				box_id:this.box_id,
				page:this.mhpage,
				level:this.mhlevel,
			}
			this.jiazaiStu = true
			this.$Request.get(this.$api.mhapi.prizeRecord,data).then(res => {
				this.jiazaiStu = false
				this.prizeRecordlist = this.prizeRecordlist.concat(res.data.list) 
			});
		},
		enterRecordtab(e){
			this.mhpage = 1;
			if(e==0){
				this.mhlevel = -1
			}else{
				this.mhlevel = e
			}
			this.enterboxrecord()
		},
		//打开开盒记录
		enterboxrecord(){
			let data = {
				box_id:this.box_id,
				page:this.mhpage,
				level:this.mhlevel,
			}
			uni.showLoading({
				title:"加载中..."
			})
			this.$Request.get(this.$api.mhapi.prizeRecord,data).then(res => {
				uni.hideLoading()
				this.prizeRecordlist = res.data.list
				this.$refs.box_recordStatus.open()
			});
		},
		are(){
			let data = {
				box_id:this.box_id
			}
			this.$Request.get(this.$api.index.boxQrcode,data).then(res => {
				this.share_url = res.data.share_url
			});
		},
		//分享
		goshare(){
			// uni.share({
			// 	provider: 'weixin',
			// 	scene: 'WXSceneSession',
			// 	type: 0,
			// 	href: this.share_url,
			// 	title:this.mharrData.box.name,
			// 	summary: '开盒有奖，快来领取奖励吧！',
			// 	imageUrl: this.mharrData.box.share_pic,
			// 	success: res => {
			// 		uni.showToast({
			// 			title: '分享成功',
			// 			icon: 'success',
			// 			duration: 600
			// 		});
			// 	}
			// });
			uni.navigateTo({
				url:"/orderPage/index/sharemh"
			})
		},
		getmhprice(){
			let data = {
				box_id:this.box_id
			}
			this.$Request.get(this.$api.index.boxDetail,data).then(res => {
				this.yulanData = res.data
				let tabindex = this.$refs.mhpop_tabStatus.tabIndex;
				if (tabindex == 1) {
					this.heji_num = this.yulanData.price;
				} else if (tabindex == 2) {
					this.heji_num = this.yulanData.three_price;
				} else if (tabindex == 3) {
					this.heji_num = this.yulanData.five_price;
				} else if (tabindex == 4) {
					this.heji_num = this.yulanData.ten_price;
				}
			});
		},
		openManghe(){
			this.xialaStatus = false;
			this.getmhprice()
			this.$refs.mhpop_tabStatus.open()
		},
		mhDetail(goods_id){
			uni.navigateTo({
				url:"/orderPage/index/mhlistDetail?goods_id=" + goods_id
			})
		},
		godetail(box_id,index){
			this.shopimg = this.mharrData.box_list[index].cover_pic
			
			this.box_id = box_id
			this.getlist();
			this.getplay();
			this.jiangList = []
			this.getchatadd(); //获取通知
		},
		//加载更多
		scrolltolower(){
			
		},
		getIndex(){
			this.$Request.get(this.$api.index.defaultindex).then(res => {
				this.defaultdata = res.data;
				this.prize_list = this.defaultdata.list[0].prize_list
			});
		},
		xiala(){
			this.xialaStatus = !this.xialaStatus
		},
		getlist(){
			let data = {
				box_id:this.box_id
			}
			this.$Request.get(this.$api.mhapi.index,data).then(res => {
				this.mharrData = res.data
				this.heji_num = this.mharrData.box.price
				this.shopimg = this.mharrData.box.cover_pic
				this.youhuinum = 0
				this.coupon_idinit = ""
			});
		},
		goback() {
			uni.navigateBack();
		},
		getplay(){
			setTimeout(()=>{
				this.getprizeList();
			},500)
			 clearTimeout();
		},
		getprizeList(){
			let data = {
				box_id:this.box_id
			}
			let prize_list = this.prize_list
			
			this.$Request.get(this.$api.index.prizeList,data).then(res => {
				let arr = res.data.list
				prize_list = prize_list.concat(arr)
				this.mhprice = res.data.price
			
			});
		},
		switchChange(e) {
			// ////console.log(e)
		},
		swiperChange() {},
		goUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		goUrl1(){
			uni.switchTab({
				url: '/pages/index/cabinetBox'
			})
		}
	}
};
</script>


<style lang="scss" scoped>
	.jiang-swiper {
		width: 540rpx;
		height:200rpx;
		padding-left: 30rpx;		position: absolute;		left: 20rpx;		top: 150rpx;		z-index: 100;
		.danmu-inner {
			display: inline-block;
			.user-box {
				min-width: 304rpx;
				min-height: 65rpx;
				opacity: 0.9;
				padding: 16rpx 20rpx 0 20rpx;
				box-sizing: border-box;
				.mall_img {
					width: 26rpx;
					height: 24rpx;
					opacity: 1;
					margin-left: 10rpx;
				}
				.user-img {
					.img-box {
						display: flex;
	
						image {
							width: 32rpx;
							height: 32rpx;
							background: rgba(55, 55, 55, 1);
							border-radius: 50%;
						}
					}
				}
	
				.user-status {
					margin-left: 10rpx;
					white-space: nowrap;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
				.user-name {
					width: 70rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
				}
				.user-text {
					margin-left: 10rpx;
					// white-space: nowrap;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}
	
.tuijian {
	background: #ffffff;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	position: relative;
	.sec_right {
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
		}
	}
	.sec_bottom {
		.view_title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.bom {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 22rpx;
			.left {
				display: flex;
				align-items: center;
				text:nth-child(1) {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					max-width: 240rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
			.right {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				text-align: center;
				line-height: 24rpx;
				background: #fd8e1b;
				border-radius: 10rpx;
				padding: 8rpx 26rpx 8rpx 26rpx;
			}
		}
	}
	
}
.jian_bom:after{
		content: "";
		flex: 1;
	}
.detail_bom_list {
		width: 750rpx;
		background: #f8f8f8;

		.jian_bom {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 14rpx;
			width: 710rpx;
			margin: 0 auto;
			box-sizing: border-box;

			.tui_sec {
				display: flex;
				flex-direction: column;
				width: 48%;
				border-radius: 25rpx;
				margin-bottom: 10rpx;
				margin-left: 5rpx;
				margin-right: 5rpx;
				// box-shadow: 0px 3rpx 15rpx rgba(0, 0, 0, 0.16);
				position: relative;
				padding-bottom: 20rpx;
				background: #fff;

				.label {
					background: #fff !important;

					image {
						width: 65rpx;
						height: 35rpx;
						position: absolute;
						right: 16rpx;
						top: 0rpx;
					}

					// width: 74rpx;
					// height: 30rpx;
					// position: absolute;
					// left: 0;
					// top: 0;
					// font-size: 20rpx;
					// font-family: PingFang SC;
					// font-weight: 400;
					// color: #F6F4D7;
					// background-size: 100% 100% !important;
					// background-repeat: no-repeat !important;

				}

				.picurl {
					// padding: 60rpx 26rpx 0 16rpx;

					image {
						width: 350rpx;
						height: 350rpx;
						border-radius: 10rpx;
					}
				}

				.tui_bom {
					.sec {
						height: 64rpx;
						padding: 0 16rpx 0 0;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
						margin-top: 9rpx;
						padding-left: 33rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
					}

					.sec2 {
						font-size: 20rpx;
						color: #999999;
						margin-top: 9rpx;
						padding-left: 33rpx;
						padding-bottom: 10rpx;
						box-sizing: border-box;
					}
				}


			}

		}

	}
.tuijian {
	background: #ffffff;
	margin-top: 10rpx;
	padding-bottom: 20rpx;
	position: relative;
	.sec_right {
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
		}
	}
	.sec_bottom {
		.view_title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.bom {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 22rpx;
			.left {
				display: flex;
				align-items: center;
				text:nth-child(1) {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					max-width: 240rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
			.right {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				text-align: center;
				line-height: 24rpx;
				background: #fd8e1b;
				border-radius: 10rpx;
				padding: 8rpx 26rpx 8rpx 26rpx;
			}
		}
	}
	.tuijian_con {
		width: 710rpx;
		margin: 0rpx auto;
		margin-bottom: 28rpx;
		padding: 20rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat !important;
		margin-bottom: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07);
		.sec_center {
			width: 710rpx;
			margin: 0 auto;
			// margin-top: 20rpx;
			display: flex;
			.left {
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
			.center {
				padding: 10rpx 0 10rpx 0;
				width: 276rpx;
				height: 172rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.list_logo {
					width: 45rpx;
					height: 48rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
				.icon {
					width: 176rpx;
					height: 176rpx;
					border-radius: 10rpx;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 0 20rpx 0 0;
				box-sizing: border-box;
				.name {
					max-width: 340rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #333;
					margin-top: 6rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
				}
				// .huaxian {
				// 	max-width: 340rpx;
				// 	font-size: 28rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: 700;
				// 	color: #707070;
				// 	text-decoration: line-through;
				// 	margin-top: 6rpx;
				// 	display: -webkit-box;
				// 	-webkit-box-orient: vertical;
				// 	-webkit-line-clamp: 2;
				// 	text-align: justify;
				// 	overflow: hidden;
				// }
				.cont {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #e80303;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					padding-right: 20rpx;
					box-sizing: border-box;
				}
				.bom {
					min-width: 320rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 2rpx;
					.left {
						display: flex;
						align-items: center;
						text:nth-child(1) {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
						}
					}
					.right {
						font-size: 29rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
						text-align: center;
						line-height: 24rpx;
						background: #fd8e1b;
						border-radius: 10rpx;
						padding: 16rpx 26rpx 16rpx 26rpx;
					}
				}
			}
		}
	}
}
.footer {
	width: 713rpx;
	min-height: 115rpx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);
	margin-top: -55rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	.logo {
		height: 126rpx;
		background: #FAE24E;
		border-radius: 20rpx;
		padding: 20rpx;
		image{
			width: 70rpx;
			height: 85rpx;
		}
	}
	.footer_list {
		width: 713rpx;
		height: 126rpx;
		margin: 0 auto;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.listview{
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 80rpx;
				height: 40rpx;
			}
			.gailv {
				font-size: 12rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.name{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}

.wrap_content {
	width: 750rpx;
	height: 100vh;
}
.recordscss{
	height: 100vh;
	position: fixed;
}
.content {
	width: 750rpx;
	// height: 1250rpx;
	height: 100%;
	background-size: 100% 100% !important;
	padding-top: 30rpx !important;
	.goods_mh {
		width: 540rpx;
		height: 300rpx;
		position: absolute;
		z-index: 99;
		top:40rpx;
		left: 100rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 20rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 100rpx;
		}
	}
	.share_btn{
		position: absolute;
		z-index: 99;
		top:380rpx;
		left: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 50rpx 0 0 50rpx;
	}
	.xuanze_top_check{
		border: 1px solid #333333 !important;
	}
	.xuanze{
		min-width: 198rpx;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top:170rpx !important;
		/* #endif */
		top:100rpx;
		right: 0;
		z-index: 9999;
		background: #FFFFFF;
		border-radius: 50rpx;
		
		.xuanze_top{
			min-width: 196rpx;
			height: 62rpx;
			margin: 0 auto;
			background: #077EE6;
			border-radius: 10rpx 0 0 0;
			display: flex;
			overflow: visible;
			justify-content: center;
			align-items: center;
			margin-top: -4rpx;

			.left{
				display: flex;
				flex-direction: column;
				position: relative;
				overflow: visible;
				text{
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
				}
			
				
			}
			.right{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-left: 10rpx;
				image{
					width: 18rpx;
					height: 14rpx;
				}
				view{
					width: 160rpx;
					height: 55rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 30rpx;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #282828;
					}
				}
			}
		}
		.tabview{
			max-height: 536rpx;
			display: flex;
			flex-direction: column;
			.tablist{
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				margin-bottom: 10rpx;
				.tabmy{
					width: 97rpx;
					height: 41rpx;
					background: #FFFFFF;
					border-radius: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 10rpx;
					z-index: 10;
				}
				image{
					width: 129rpx;
					height: 92rpx;
					margin-top: 20rpx;
				}
				.title{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
	.kefu_view{
		width: 84rpx;
		height: 46rpx;
		background: #FF8C1E;
		border-radius: 20rpx 0px 0px 20rpx;
		position: absolute;
		top: 700rpx;
		right: 0;
		display: flex;
		align-items: center;
		.xiaoxi{
			width: 24rpx;
			height: 26rpx;
			position: absolute;
			right:70rpx;
		}
		.kefulogo{
			width: 38rpx;
			height: 60rpx;
			position: absolute;
			right:20rpx;
		}
	}
	.case_yuan{
		width: 685rpx;
		height: 380rpx;
		background: url("https://pd.pdaxiang.com/upload/static/index/dizhuo.png") no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		position: absolute;
		top: 720rpx;
		left: 0;
		right: 0;
		margin: auto;
		.footer_pricess{
			padding-bottom: 20rpx;
			margin-top: 26rpx;
			text {
				color: #FF0202;
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}
	.footer_btn{
		width: 750rpx;
		min-height: 170rpx;
		margin: 0 auto;
		margin-top: 86rpx;
		background-repeat:no-repeat !important;
		background-size: 100% 100% !important;
		padding-bottom: 40rpx;
		.zhiyin_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10rpx;
			text {
				font-size: 34rpx;
				font-family: itemfont;
				font-weight: 700;
				background: #fff;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				letter-spacing:6rpx;
			}
			.open {
				width: 380rpx;
				height: 36rpx;
				margin-top: 20rpx;
			}
			.xia {
				width: 58rpx;
				height: 50rpx;
				margin-top: 20rpx;
			}
		}
		.footer_btn2{
			background-repeat:no-repeat !important;
			background-size: 100% 100% !important;
			
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
		}
		
		.footer_btn_top{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 100rpx 40rpx 0rpx 40rpx;
			margin-bottom: 0rpx;
			position: relative;
			z-index: 10;
			.openmh_right{
				display: flex;
				flex-direction: column;
				align-items: center;
				view{
					width: 98rpx;
					height: 102rpx;
					background-repeat:no-repeat !important;
					background-size: 100% 100% !important;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				text{
					font-size: 21rpx;
					font-family: PingFangSC;
					font-weight: 600;
					color: #FFFFFF;
				}
				position: relative;
				top: 10rpx;
				z-index: 2;
				
			}
			.openmh_left{
				display: flex;
				flex-direction: column;
				align-items: center;
				view{
					width: 98rpx;
					height: 88rpx;
					background-repeat:no-repeat !important;
					background-size: 100% 100% !important;
					
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				position: relative;
				top: 10rpx;
				z-index: 2;
				text{
					font-size: 21rpx;
					font-family: PingFangSC;
					font-weight: 600;
					color: #FFFFFF;
				}
			
			}
			.openmh_btn{
				width: 438rpx;
				height: 133rpx;
				background-repeat: no-repeat !important;
				background-size: 100% 100% !important;
				// animation: ldx-breath 2s infinite linear;
				font-size: 38rpx;
				font-family: RTWS BanHei G0v1;
				font-style: italic;
				color: #ffffff;
				font-weight: 400;
				font-family: itemfont;
			}
			
			  .openmh {
			  	text {
			  		font-family: PingFangSC;
			  	}
			  }
		}
		
	}
	.yinying_cont {
		.yinying {
			width: 446rpx;
			height: 85rpx;
		}
	}
	.case_price {
		margin-top: 26rpx;
		text {
			font-size: 34rpx;
			font-family: itemfont;
			font-style: italic;
			margin-left: 10rpx;
			background-image: -webkit-linear-gradient(bottom, #D8AF15, #D8AF15);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			// font-size: 36rpx;
			// font-style: italic;
			// font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
			// font-weight: 400;
			// color: #fff;
			// line-height: 0px;
			// text-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.0784);
			// -webkit-text-stroke: 1px #d8af15;
			// text-stroke: 1px #d8af15;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}
	}
	.caselist {
		width: 640rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;
		.swiper_view {
			width: 500rpx;
			min-height: 430rpx;
			margin: 0 auto;
		}
		@keyframes ldx-breath {
			0% {
				animation-timing-function: cubic-bezier(0.9647, 0.2413, -0.0705, 0.7911);
				transform: scale(0.9099999999999999);
			}

			51% {
				animation-timing-function: cubic-bezier(0.9226, 0.2631, -0.0308, 0.7628);
				transform: scale(1.02994);
			}

			100% {
				transform: scale(0.9099999999999999);
			}
		}
		.zhishi {
			animation: ldx-breath 2s infinite linear;
		}
		.zhishi {
			display: flex;
			flex-direction: column;
			position: absolute;
			z-index: 2;
			right: 44rpx;
			top: 170rpx;
			image {
				width: 77rpx;
				height: 78rpx;
			}
			text {
				font-size: 25rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #ffffff;
				line-height: 72rpx;
				-webkit-text-stroke: 3rpx #2d8cc3;
				text-stroke: 3rpx #2d8cc3;
			}
		}
		.swiper_cont {
			display: flex;
			align-items: center;
			justify-content: center;
			.center_img {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				animation:mymove 4s linear infinite;
				.shop {
					width: 500rpx;
					height: 400rpx;
				}
			}
		}
		@keyframes mymove
		  {
		   0%   {top: 0upx;}
		   25%  {top: 30upx;}
		   50%  {top: 0upx;}
		   75%  {top: 30upx;}
		   100%  {top: 0upx;}
		  }
	}
	.kong {
		width: 750rpx;
		height: 320rpx;
	}

	.header {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 20rpx;
		top: 50rpx;
		z-index: 250;
	}
	.section {
	}
	
}
</style>
